/*
* @Author: zhaoyong
* @Date:   2018-03-10 14:19:44
*/

import React, {Component} from 'react';
import PageHeader from 'ant-design-pro/lib/PageHeader';
import styles from './index.less';
import {connect} from 'react-redux';
import {Route, Switch, Redirect} from 'react-router-dom';

import {createHashHistory} from 'history';

import Banner from './childView/banner';
import News from './childView/news';
import Comment from './childView/comment';
import Topic from './childView/topic';
import Subject from './childView/subject';
import Propel from './childView/propel';

import {OPERATEARRAY} from 'constant/type';

let history = createHashHistory();

class Message extends Component {
  handleTabChange = key => {
    const {match} = this.props;
    let jumpUrl;
    switch (key) {
      case 'banner':
        jumpUrl = `${match.url}/banner`;
        break;
      case 'news':
        jumpUrl = `${match.url}/news`;
        break;
      case 'comment':
        jumpUrl = `${match.url}/comment`;
        break;
      case 'topic':
        jumpUrl = `${match.url}/topic`;
        break;
      case 'subject':
        jumpUrl = `${match.url}/subject`;
        break;
      default:
        break;
    }
    history.push(jumpUrl);
  };
  getHeaderMsg = () => {
    let breadcrumbList, title, action, description, tabList;

    title = '用户运营';

    tabList = OPERATEARRAY.map(item => {
      item.key = item.type;
      item.tab = item.desc;
      return item;
    });

    return {
      title,
      tabList,
    };
  };
  getPageHeader() {
    const {title, action, tabList} = this.getHeaderMsg(),
      {match, location} = this.props;
    return (
      <PageHeader
        title={title}
        tabList={tabList}
        onTabChange={this.handleTabChange}
        activeTabKey={location.pathname.replace(`${match.path}/`, '')}
        className={styles.pageHeader}
      />
    );
  }
  render() {
    const {match} = this.props;
    return (
      <div className={styles['home-wrap']}>
        {this.getPageHeader()}
        <Switch>
          <Route path="/operate/banner" component={Banner} />
          <Route path="/operate/news" component={News} />
          <Route path="/operate/comment" component={Comment} />
          <Route path="/operate/topic" component={Topic} />
          <Route path="/operate/subject" component={Subject} />
          <Route path="/operate/propel" component={Propel} />
          <Redirect to="/operate/banner" />
        </Switch>
      </div>
    );
  }
}

export default connect()(Message);
